<template>
  <div class="app-body">
    <div class="shop-list">
      <router-link to="/shop/detail" class="shop-item"
        v-for="(item, i) in list" :key="i">
        <img :src="item.face" class="shop-item-face">
        <div class="shop-item-bd">
          <h3>{{item.name}}</h3>
          <p>{{item.address}}</p>
          <div class="shop-item-ft">
            <icon id="time"></icon>
            8:00-20:00
            <div class="fr">
              <icon id="location"></icon>
              2.3km
            </div>
          </div>
        </div>
      </router-link>
    </div>
    <div v-if="list" class="nodata">全部加载完毕</div>
  </div>
</template>

<script>
import face from '@/assets/img/tmp/face.jpg'

export default {
  data () {
    return {
      list: [
        { face, name: '茶韵体验店', address: '上海市浦东新区紫薇路' },
        { face, name: '茶韵体验店', address: '上海市浦东新区紫薇路' },
        { face, name: '茶韵体验店', address: '上海市浦东新区紫薇路' },
        { face, name: '茶韵体验店', address: '上海市浦东新区紫薇路' },
        { face, name: '茶韵体验店', address: '上海市浦东新区紫薇路' },
        { face, name: '茶韵体验店', address: '上海市浦东新区紫薇路' }
      ]
    }
  }
}
</script>

<style lang="scss" scoped>
.shop-item {
  display: flex;
  padding: 15px 10px;
  border-bottom: 1px solid $bg-dark;
  background: $bg;

  &-face {
    font-size: 85px;
    height: 1em;
    width: 1em;
    margin-right: 15px;
    line-height: 0;
  }

  &-bd {
    flex: 1;
    position: relative;

    > h3 {
      margin: 0;
      font-weight: normal;
      font-size: 14px;
    }

    > p {
      margin: 10px 0 25px;
      line-height: 1;
      font-size: 12px;
      color: #666;
    }
  }

  &-ft {
    position: relative;
    bottom: 0;
    left: 0;
    right: 0;
    font-size: 14px;
    color: #999;

    > .icon {
      color: #333;
    }
  }
}
</style>
